<!-- 多个柱子 -->
<template>
  <div :style="{ width: width, height: height }">
    <div
      :id="id"
      :style="{ width: width, height: height }"
      :class="[data && data.length > 0 ? 'chart-img' : '']"
    ></div>
  </div>
</template>

<script>
import echarts from 'echarts';
import { getCoreCustomers } from '../../../api/customerManagement/informationOverview.js';
export default {
  name: 'CoreCustomersPie',
  props: {
    id: {
      required: true,
      type: String,
      default: 'multi-line',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
    allData: {
      type: Array,
      default() {
        return [];
      },
    },
    chartData: {
      type: Array,
      default() {
        return [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' },
        ];
      },
    },
  },

  data() {
    return {
      theme: 'dark',
      data: null,
    };
  },
  mounted() {
    this.loadKHJSLFBDData();
  },
  watch: {},
  created() {},
  methods: {
    async loadKHJSLFBDData() {
      const { data } = await getCoreCustomers();
      this.getChart(data);
      this.data = data;
      console.log(data, 777);
    },
    getChart(data) {
      // 获取主题颜色
      let handleData = [];
      Array.from(data || []).forEach((item) => {
        handleData.push({
          value: item.totalQuantity,
          name: item.tradeType,
        });
      });
      const settingApp = JSON.parse(localStorage.getItem('settings-app'));
      this.theme = settingApp?.theme || 'dark';
      var chartDom = document.getElementById(this.id);
      var myChart = echarts.init(chartDom);
      var option = {
        color: ['#2FA3FF', '#EAEDFE', '#44FF98', '#FFCD41', '#47EAFD'],
        tooltip: {
          show: true,
          trigger: 'item',
          axisPointer: {
            type: 'shadow',
          },
          textStyle: {
            fontSize: 10,
          },
        },
        backgroundColor: 'rgb(255,255,255,0)',
        legend: {
          show: true,
          icon: 'circle',
          itemWidth: 8,
          itemHeight: 8,
          textStyle: {
            fontSize: 10,
            color: '#ffffff',
          },
          orient: 'vertical',

          x: 'right',
          y: 'center',
          formatter: function (name) {
            let data = option.series[0].data;
            let total = 0;
            let tarValue;
            for (let i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            let v = tarValue;
            let p = Math.round((tarValue / total) * 100); //占比
            return `${name}：${p}%`;
          },
        },

        series: [
          {
            name: '饼图',
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#101623',
              borderWidth: 2,
            },
            label: {
              show: false,
              position: 'center',
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 20,
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false,
            },
            data: handleData,
          },
        ],
        // grid: [
        //   {
        //     left: '46%',
        //     // right: '6%',
        //     // top: '20%',
        //     // bottom: '10%',
        //     containLabel: true,
        //   },
        // ],
        graphic: [
          {
            type: 'image',
            left: 'center',
            top: '0%',
            z: -10,
            bounding: 'raw',
            // rotation: 0,
            // // origin: [30, 55],
            // scale: [1.5, 1.5],
            style: {
              // 背景图
              image: require('../../../assets/pie_bg.png'),
              opacity: 1,
              width: 200, // 图片宽度
              height: 180, // 图片高度
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.chart-img {
  // background-image: url('../../../assets/pie_bg.png');
  // background-repeat: no-repeat;
  // background-size: 60%;
  // background-position: 50% -10%;
}
#CoreCustomersPie {
  width: 100%;
  height: 100%;
}
</style>
